<!--
 * @Author: your name
 * @Date: 2019-12-16 11:39:53
 * @LastEditTime: 2020-08-11 15:31:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /mimall/src/pages/index.vue
 -->
<template>
  <div class="index">
    <!--关于我们-->
    <div class="about-us">
      <div class="container">
        <div class="about-header">
          <div class="about-header_left">
              <!-- <h2>ABOUT US</h2>
              <h4>集聚国内高科技人才组成的行业精英研发技术团队</h4>
              <p>
                是的，是的，是你打算，大时代你拉谁对你来说到哪啦面对那是肯定能收到您稍等，
                电脑垃圾到拉萨讲道理是的哈搜大活动had了呢老实交代垃圾堆里的
              </p> -->
          </div>
          <div class="about-header_right">
            <ul>
              <!-- <li>公司概况</li>
              <li>公司概况</li>
              <li>公司概况</li>
              <li>公司概况</li>
              <li>公司概况</li>
              <li>公司概况</li> -->
            </ul>
          </div>   
        </div>
        <div class="about-content">
          <p>
            {{homeData.sysIntroduction.content}}
          </p>
        </div>
      </div>
    </div>
    <!--产品中心-->
    <div class="product-box">
      <div class="container">
        <div class="product-header">
          <div class="product-header_title">
            <img src="/images/cptitle.jpg" alt="">
          </div>
          <!-- <h3>PRODUCT CENTER</h3>
          <h4>产品中心</h4> -->
          <p>
            公司采用自主的计算机集成激光熔覆-熔化-烧结成形技术（简称：L-SS激光三维增材成形技术）研制的全尺寸金属3D打印应用服务高端增材制造平台 产品广泛用于航空、
            航天、核能核电、军事装备等领域
          </p>
        </div>
        <div class="wrapper">
          <div class="banner-left">
            <a href="/#/product/35">
              <img v-lazy="'/images/mix-alpha.jpg'" alt="">
            </a>
          </div>
          <div class="list-box">
            <div class="list">
              <div class="item" v-for="item in homeData.sysProductList" :key="item.id">
                <div class="item-img">
                  <img v-lazy="`http://hlb521168.picp.io/layui/download?filepath=${item.pictureUrl}`" alt="">
                </div>
                <div class="item-info">
                  <h3>{{item.title}}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新闻中心-->
    <div class="news-box">
      <div class="container">
        <div class="product-header">
          <div class="product-header_title">
            <img src="/images/newtitle.png" alt="">
          </div>
        </div>
        <div class="wrapper">
          <div class="banner-left">
            <div class="banner-left_btn">
              <el-button>企业公告</el-button>
              <el-button>企业新闻</el-button>
              <el-button>公司新闻</el-button>
            </div>
            <div class="board-screen">
              <img class="board-screen_img" src="/images/cp.jpg" alt="" width="370" height="216">
              <!-- <p class="board-screen_text">撒打算打算打算打算打算打</p> -->
            </div>
          </div>
          <div class="list-box">
            <div class="list" v-for="item in homeData.sysNoticeList" :key="item.id">  
              <h3>{{item.noticetitle}}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--成功案例-->
    <!-- <div class="success-ads">
      <div class="container">
        <div class="ads-title"></div>
        <div class="ads-box">
          <a :href="'/#/product/' + item.id" v-for="item in adsList" :key="item.id">
            <img v-lazy="item.img" />
          </a>
        </div>
        <div class="more-ads">
          <el-button type="primary" round>更多案例 >></el-button>
        </div>
      </div>
    </div> -->
    <!--合作伙伴-->
    <!-- <div class="partner">
      <div class="container">
        <div class="partner-title"></div>
        <div class="ads-box">
          <a :href="'/#/product/' + item.id" v-for="item in adsList" :key="item.id">
            <img v-lazy="item.img" />
          </a>
        </div>
        <div class="more-ads">
          <el-button type="primary" round>更多合作伙伴 >></el-button>
        </div>
      </div>
    </div> -->
    <!--联系我们-->
    <div class="concat">
      <div class="container">
        <div class="concat-title"></div>
        <div class="concat-box">
          <div class="concat-box_left">
            <div class="input-top">
              <el-input
                class="input-name"
                size="middle"
                placeholder="请输入姓名"
                prefix-icon="el-icon-user"
                @change="changeUserName"
                v-model="name">
              </el-input>
              <el-input
                size="middle"
                placeholder="请输入邮箱"
                prefix-icon="el-icon-paperclip"
                @change="changeEmail"
                v-model="email">
              </el-input>
            </div>
            <div class="input-bottom">
              <el-input
                type="textarea"
                :rows="8"
                @change="changeText"
                prefix-icon="el-icon-chat-dot-square"
                placeholder="请输入留言内容"
                v-model="text">
              </el-input>
            </div>
            <el-button type="primary" size="middle" @click="subCommentText">提交留言</el-button>
          </div>
          <div class="concat-box_right">
            <img src="/images/map.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
    <modal 
      title="提示信息" 
      sureText="留言提交" 
      btnType="3" 
      modalType="middle"
      :showModal="showModal"
      @submit="ok"
      @cancel="showModal=false"
    >
      <template v-slot:body>
        <p>留言提交成功</p>
      </template>
    </modal>
  </div>
</template>

<script>
import Modal from '../components/Modal'
import Qs from 'qs'
import axios from 'axios'

export default {
  name: 'index',
  components: {
    Modal
  },
  data () {
    return {
      name: '',
      email: '',
      text: '',
      introduce: {},
      menuList: [],
      adsList: [],
      phoneList: [],
      showModal: false,
      newsList: [],
      homeData: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const home_data = JSON.parse(window.localStorage.getItem('homeData'))
      if (this.homeData) {
        this.homeData = home_data
      } else {
        this.axios.post('/home').then(res => {
          /* eslint-disable */
          this.homeData = res.data
          window.localStorage.setItem('homeData', JSON.stringify(res.data) || {})
        })
      }
    },
    changeUserName (e) {
      this.name = e.target.value
    },
    changeEmail (e) {
      this.email = e.target.value
    },
    changeText (e) {
      this.text = e.target.value
    },
    ok() {
      this.showModal = false
    },
    // 提交留言信息
    subCommentText () {
      const comment = {
        name: this.name,
        mail: this.email,
        content: this.text
      }
      axios.post('/leavingmessage', Qs.stringify(comment)).then(res => {
        /* eslint-disable */
        if (res.data.msg.code === '0') {
          this.$message.success(res.data.msg.msg)
          this.name = ''
          this.mail = ''
          this.content = ''
        } else {
          this.$message.error('留言失败')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import '../assets/scss/mixin.scss';
  @import '../assets/scss/config.scss';

  .index{
    .about-us{
      padding: 60px 0;
      display: flex;
      flex-direction: column;
      background: url('/images/aboutbj.jpg') no-repeat;
      box-shadow: 0 3px 0 #888;
      overflow: hidden;
      .about-header{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        width: 100%;
        height: 140px;
        background: url('/images/naboutbj.png') no-repeat;
        // border-bottom: 1px solid #ccc;
        .about-header_left{
          display: flex;
          flex-direction: column;
          width: 42%;
          h2, h4{
            font-weight: normal;
            color: #000;
            margin-bottom: 10px;
          }
          h4 {
            color: #666;
            font-size: 17px;
          }
          p{
            font-size: 14px;
            color: #888;
          }
        }
        .about-header_right{
          display: flex;
          width: 36%;
          margin-left: 4%;
          ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            li{
              position: relative;
              display: flex;
              width: 27%;
              padding: 5px 0;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-size: 13px;
              z-index: 1;
              &::before{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: #51bfff;
                transform: skewX(-45deg);
                z-index: -1;
              }
            }
          }
        }
      }
      .about-content p{
        font-size: 15px;
        color: #666;
        margin: 10px 0;
      }
    }
    .success-ads{
      width: 100%;
      padding: 50px 0;
      background: url('/images/albj.jpg') repeat;
      overflow: hidden;
      .ads-title{
        width: 100%;
        height: 100px;
        background: url('/images/anlititle.png') no-repeat;
        overflow: hidden;
      }
      .ads-box{
        @include flex();
        @include ads();
        a{
          width: 296px;
          height: 167px;
        }
      }
      .more-ads{
        @include moreAds()
      }
    }
    .partner{
      overflow: hidden;
      background-color: #fff;
      .partner-title{
        width: 100%;
        height: 96px;
        background: url('/images/hzhb.png') no-repeat;
        margin-top: 55px;
        margin-bottom: 30px;
      }
      .ads-box{
        @include flex();
        @include ads();
        a{
          width: 296px;
          height: 167px;
        }
      }
      .more-ads{
        @include moreAds();
        margin-bottom: 50px;
      }
    }
    .concat{
      overflow: hidden;
      background-color: #f5f5f5;
      .concat-title{
        width: 100%;
        height: 96px;
        background: url('/images/lxtitle.png') no-repeat;
        margin-top: 55px;
        margin-bottom: 30px;
      }
      .concat-box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 60px;
        .concat-box_left{
          display: flex;
          flex-direction: column;
          .input-top{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 15px;
            .el-input{
              width: 250px;
            }
            .input-name{
              margin-right: 30px;
            }
          }
          .input-bottom{
            display: flex;
            flex-direction: row;
            margin-bottom: 25px;
          }
        }
        .concat-box_right{
          width: 575px;
          height: 316px;
        }
      }
    }
    .banner{
      margin-bottom: 50px;
    }
    .product-box{
      background-color: #eee;
      padding: 30px 0 50px;
      .product-header{
        text-align: center;
        h3{
          font-weight: normal;
          color: #000;
        }
        h4{
          font-weight: normal;
          margin: 15px 0;
          font-size: 17px;
        }
        p{
          font-size: 14px;
          width: 700px;
          margin: 0 auto;
          color: #888;
          margin-top: 30px;
          margin-bottom: 35px;
        }
      }
      h3{
        font-size: 22px;
        height: 21px;
        line-height: 21px;
        color: $colorB;
      }
      .wrapper{
        display: flex;
        .banner-left{
          margin-right: 8px;
          a{
            img{
              width: 224px;
              height: 619px;
            }
          }
        }
        .list-box{
          .list{
            @include flex();
            width: 986px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 14px;
            &:last-child{
              margin-bottom: 0;
            }
            .item{
              width: 23%;
              // margin: 10px 1%;
              margin-bottom: 15px;
              height: 302px;
              display: flex;
              flex-direction: column;
              // justify-content: space-around;
              // flex-wrap: wrap;
              background-color: $colorG;
              text-align: center;
              span{
                display: inline-block;
                width: 67px;
                height: 24px;
                background-color: #7ecf68;
                font-size: 14px;
                line-height: 24px;
                color: #fff;
                &.new-pro{
                  background-color: #7ecf68;
                }
                &.kill-pro{
                  background-color: #e82626;
                }
              }
              .item-img{
                img{
                  width: 100%;
                  height: 195px;
                }
              }
              .item-info{
                padding-top: 20px;
                h3{
                  font-size: $fontJ;
                  color: $colorB;
                  line-height: $fontJ;
                  font-weight: bold;
                }
                p{
                  color: $colorD;
                  line-height: 13px;
                  margin: 6px auto 13px;
                }
                .price{
                  color: #f20a0a;
                  font-size: $fontJ;
                  font-weight: boldl;
                  cursor: pointer;
                  &:after{
                    @include bgImg(18px, 18px, '/images/icon-cart-hover.png');
                    content: '';
                    margin-left: 5px;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
      }
    }
    .news-box{
      background: url('/images/newbj.jpg') no-repeat;
      padding: 30px 0 50px;
      .product-header{
        text-align: center;
        h3{
          font-weight: normal;
          color: #000;
        }
        h4{
          font-weight: normal;
          margin: 15px 0;
          font-size: 17px;
        }
        p{
          font-size: 14px;
          width: 700px;
          margin: 0 auto;
          color: #888;
          margin-top: 30px;
          margin-bottom: 35px;
        }
      }
      .wrapper{
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .banner-left{
          margin-right: 8px;
          .banner-left_btn{
            display: flex;
            justify-content: space-between;
          }
          .board-screen{
            width: 390px;
            height: 300px;
            margin-top: 20px;
            position: relative;
            background: url('/images/diannao.png') no-repeat;
            .board-screen_img{
              margin: 10px;
            }
            .board-screen_text{
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              height: 35px;
              line-height: 35px;
              opacity: .8;
              width: 370px;
              position: absolute;
              bottom: 74px;
              background-color: #000;
              z-index: 1;
              margin: 0 10px;
            }
          }
        }
        .list-box{
          .list{
            width: 555px;
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
            h3{
              background: url('/images/newrbj.png') no-repeat;
              height: 35px;
              font-size: $fontJ;
              color: #024b91;
              line-height: 35px;
              padding-left: 50px;
              font-weight: bold;
            }
            p{
              color: #ccc;
              line-height: 25px;
              margin: 6px 0 13px;
              display: flex;
              flex-wrap: wrap;
            }
          }
        }
      }
    }
  }
</style>